<template>
    <div class="index">
        <van-nav-bar
            :title="'共计'+totalCount+'条'"
            left-text="新增样品检验委托单"
            @click-left="onClickLeft"
            @click-right="onClickRight"
            >
             <van-icon name="search" size='24' style="margin-right:10px" @click="showSearchClick" slot="right" />
            <van-icon name="envelop-o" size='24' slot="right" @click="toMes" class='topBarRight'  :info='msgNum'/>
        </van-nav-bar>
        <van-search
            @search='getDataInfo'
            v-if="showSearch"
            v-model="searchvalue"
            shape="round"
            background="#1989fa"
            placeholder="请输入搜索关键词"
        />
        <div class='indexList'>
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                <van-collapse v-model="activeNames">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                >
                    <van-panel class='contractList'  desc="描述信息" status="状态" v-for="(item,index) in list" :key="index" >
                        <div slot="header">
                            <div class='contractBottom'>
                                <div class='half'><span style="font-weight:700">合同编号:</span>{{item.fcontractcode}}</div>
                                <div class='half'><span style="font-weight:700">合同日期:</span>{{item.fcontractdate}}</div>
                            </div>
                            <div class='contractBottom'>
                                <div ><span style="font-weight:700">委托单日期:</span>{{item.fbilldate}}</div>
                            </div>
                            <div class='contractBottom'>
                                <div ><span style="font-weight:700">委托单编号:</span>{{item.fsamplereportcode}}</div>
                            </div>
                            <div class='contractBottom'>
                                <div class='half'><span style="font-weight:700">委托单位:</span>{{item.fdeptname_cus}}</div>
                                <div class='half'><span style="font-weight:700">样品名称:</span>{{item.fsampleid}}</div>
                            </div>
                         
                            <div class='contractTop borderBottom'>
                                <div class='contractTopLeft'>
                                    <div style="line-height:40px"><span style="font-weight:700">维护进度:</span>{{item.fprogress}}</div>
                      
                                </div>
                                <div class='contractTopRight'>
                                    <van-dropdown-menu :overlay='false' >
                                        <van-dropdown-item title="操作">
                                            <div @click="editContract(item)" class='iconAndText van-hairline--bottom'>
                                                <van-icon name="edit" size='22' style="line-height:30px;margin-right:6px"/>
                                                <span>修改</span>
                                            </div>
                                            <div @click="delContract(item)" class='iconAndText van-hairline--bottom'>
                                                <van-icon name="delete" size='22' style="line-height:30px;margin-right:6px"/>
                                                <span>删除</span>
                                            </div>
                                            <div @click="viewContract(item)" class='iconAndText van-hairline--bottom'>
                                                <van-icon name="eye-o" size='22' style="line-height:30px;margin-right:6px"/>
                                                <span>查看</span>
                                            </div>
                                            <div @click="submitContract(item)" class='iconAndText'>
                                                <van-icon name="certificate"  size='22' style="line-height:30px;margin-right:6px"/>
                                                <span>提交</span>
                                            </div>
                                        </van-dropdown-item>
                                    </van-dropdown-menu>
                                </div>
                              
                            </div>
                        </div>
      

                        <!-- <div class='productConent'>
                            <div 

                                class="proText productList van-hairline--bottom" 
                                v-for="(items,indexC) in item.productList"
                                v-if="indexC==0 && !item.isShow"
                                :key="indexC">
                                    <div class='productTop' >
                                        <div>{{indexC+1}}</div>
                                        <div>{{items.fproductname}}</div>
                                        <div>维护进度：70%</div>
                                    </div>
                                    <div class='productTop' style=" justify-content:space-between">
                                         <div class='addProduct' @click="toStandardInfo">标准信息详情</div>
                                        <div>
                                            <van-icon @click="toAddProduct($event)" name="add-o" color="#ff976a" size='22' style="line-height:30px;margin-right:6px"/>
                                            <van-icon name="edit" color="#ff976a" size='22' style="line-height:30px;margin-right:6px"/>
                                            <van-icon name="delete" color="#ee0a24" size='22' style="line-height:30px;margin-right:6px"/>
                                            <van-icon name="eye-o" color="#1989fa"  size='22' style="line-height:30px;margin-right:6px"/>
                                            <van-icon name="certificate" color="#07c160"   size='22' style="line-height:30px;margin-right:6px"/>
                                        </div>
                                    </div>
                            </div>
                            <div 
                                v-if="item.isShow"
                                class="proText productList van-hairline--bottom" 
                                v-for="(items,indexC) in item.productList"
                                :key="indexC">
                                    <div class='productTop' >
                                        <div>{{indexC+1}}</div>
                                        <div>{{items.fproductname}}</div>
                                        <div>维护进度：{{items.fprogress}}</div>
                                    </div>
                                    <div class='productTop' style=" justify-content:space-between">
                                        <div class='addProduct' @click="toStandardInfo">标准信息详情</div>
                                        <div>
                                            <van-icon @click="toAddProduct($event)" name="add-o" color="#ff976a" size='22' style="line-height:30px;margin-right:6px"/>
                                            <van-icon name="edit" color="#ff976a" size='22' style="line-height:30px;margin-right:6px"/>
                                            <van-icon name="delete" color="#ee0a24" size='22' style="line-height:30px;margin-right:6px"/>
                                            <van-icon name="eye-o" color="#1989fa"  size='22' style="line-height:30px;margin-right:6px"/>
                                            <van-icon name="certificate" color="#07c160"   size='22' style="line-height:30px;margin-right:6px"/>
                                        </div>
                                    </div>
                            </div>
                            <div class='addProduct' style='line-height:36px' @click="more(item)" v-if="item.productList.length !=0">{{testBtn}}</div>
                            <div class='addProduct' style='line-height:36px' @click="toAddProduct($event)" v-else>添加商品</div>
                        </div> -->
                   
                    </van-panel>
                </van-list> 
                </van-collapse>
            </van-pull-refresh>
        </div>

        <footer-btn></footer-btn>
    </div>
</template>

<script>
import {
    search
    ,deletesamplereport
    ,updatefisstate
} from '@/api/index'
import { 
    Button
    ,NavBar
    ,Icon
    ,PullRefresh 
    ,Toast
    ,List
    ,SwipeCell
    ,Collapse
    , CollapseItem
    ,Divider
    ,Panel
    ,DropdownMenu
    , DropdownItem
    ,Search
    ,Dialog
    } from 'vant';
import footerBtn from '@/components/footerBtn';
export default {
    name: 'index',
    components: {
        footerBtn,
        [NavBar.name]:NavBar,
        [Button.name]:Button,
        [Icon.name]:Icon,
        [PullRefresh.name]:PullRefresh,
        [List.name]:List,
        [SwipeCell.name]:SwipeCell,
        [Collapse.name]:Collapse,
        [CollapseItem.name]:CollapseItem,
        [Divider.name]:Divider,
        [Panel.name]:Panel,
        [DropdownMenu.name]:DropdownMenu,
        [DropdownItem.name]:DropdownItem,
        [Search.name]:Search,
        [Dialog.name]:Dialog,
    },
    data () {
        return {
            totalCount:0,
            searchFlag:false,
            showSearch:false,
            searchvalue:'',
            activeNames:['1'],
            msgNum: 1,
            count: 0,
            isLoading: false,
            list: [],
            list1:1,
            loading: false,
            finished: false,
            refreshing: false,
            value1:0,
            option1:[
                { text: '操作', value: 0 },
                { text: '删除', value: 1 },
                { text: '查看', value: 2 },
                { text: '提交', value: 3 }
            ],
            testBtn:'更多商品',
            flag:true,
            fuserid:'bb5a8fe0-e03e-42ba-a1ed-279bba27b3a3',
            fuseridwx:'o42mZxHZdK2AmdKvC4ECvzExXaaY',
            pagenumber :2
        }
    },
    created() {
        //this.getDataInfo()
    },
    methods:{
        showSearchClick(){
            this.searchFlag = !this.searchFlag
            if(this.searchFlag){
                this.showSearch = true
            }else{
                this.showSearch = false
                this.searchvalue = ''
            }
        },
        getDataInfo(){
            search({
                searchvalue:this.searchvalue,
                fuserid:this.fuserid,
                fuseridwx:this.fuseridwx,
                pagenumber:this.pagenumber
            }).then(res=>{
                console.log(res)
                this.list = res.pageResult.results
                this.totalCount = res.pageResult.totalCount
               
            })
        },
        more(item){
            item.isShow = !item.isShow 
            this.flag = !this.flag
            if(!this.flag){
                this.list1 = 3
                this.testBtn = '收起'
            }else{
                this.list1 = 1
                this.testBtn = '更多商品'   
            }

        },
        onLoad() {
            if (this.isLoading) {
                this.list = [];
                this.isLoading = false;
            }
            search({
                searchvalue:this.searchvalue,
                fuserid:this.fuserid,
                fuseridwx:this.fuseridwx,
                pagenumber:this.pagenumber
            }).then(res=>{
               
                this.totalCount = res.pageResult.totalCount
                res.pageResult.results.forEach(element => {
                    this.list.push(element);
                });
                console.log(this.list)
                this.pagenumber = res.pageResult.pageNo
                this.loading = false;
                if (this.list.length >= res.pageResult.totalCount) {
                    this.finished = true;
                }
            })
        },
        onClickLeft(){
            this.$router.push({path:"/addSampleBill",query:{'state':'add'}});
        },
        toAddProduct(){
            this.$router.push({path:"/addProduct1",query:{'state':'add'}});
        },
        onClickRight(){

        },
        onRefresh() {
            // 清空列表数据
            this.finished = false;
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.onLoad();
        },
        toStandardInfo(){
            this.$router.push({path:"/standardInfo"});
        },
        delContract(item){
            Dialog.confirm({
                message: '确定删除该合同？'
            }).then(() => {
                deletesamplereport({fsamplereportid:item.fsamplereportid}).then(res=>{
                    Toast('删除成功！')
                    this.getDataInfo()
                })
            }).catch(() => {
                // on cancel
            });
        },
        submitContract(item){
            Dialog.confirm({
                message: '确定提交该合同？'
            }).then(() => {
                updatefisstate({
                    fsamplereportid:item.fsamplereportid,
                    fisstate:item.fisstate,
                }).then(res=>{
                    this.getDataInfo()
                })
            }).catch(() => {
                // on cancel
            });
        },
        editContract(item){
            console.log(item)
            this.$router.push({path:"/addSampleBill",query:{'state':'edit','fcontractid':item.fsamplereportid}});
        },
        viewContract(item){
            this.$router.push({path:"/addContract",query:{'state':'view','fcontractid':item.fcontractid}});
        },
        toMes(){
            this.$router.push({path:"/message"});
        }

    }
}
</script>
<style >
.indexList{
    margin-bottom:50px
}
.leftBtn .van-dropdown-menu{
    background: #f7f8fa
}
.topBarRight{
    font-size: 24px;
}
.listTile{
    text-align: left
}
.listLabel{
    text-align: left
}
.addProduct{
    color: #1989fa;
    margin-right:10px
}
.proText{
    text-align: left
}
.proText{
    margin-bottom:6px
}
.contractTop{
    display:flex
}
.contractTopLeft{
    width:70%;
    text-align: left
}
.contractTopLeft div{
    padding:4px
}
.contractTopRight{
    width:30%;
    text-align: right
}
.van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after{
    border:none
}
.contractTopRight .van-popup--top{
    width: 30%;
    left: 70%;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.contractList{
    border-radius: 4px;
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    margin:6px;
}
.iconAndText{
    text-align: center;
    line-height: 30px;
    display: flex;
    justify-content:center;
    width: 80%;
    margin:0 auto;
    padding: 4px 0 4px 0
}
.borderBottom{
    border-bottom: 1px dashed #DCDFE6
}
.productConent{
}
.productTop{
    display: flex;
    justify-content:space-between;
    line-height: 30px
}
.productList{
    margin:16px 0 0 0
}
.contractBottom{
    display: flex;
    line-height: 40px;
    justify-content: space-between ;
    border-bottom: 1px dashed #DCDFE6;
}
.half{
    width: 50%;
    text-align: left
}
</style>
